<template>
	<view class="content">
		<u--form
					labelPosition="top"
					labelWidth="80"
					:model="form"
					:rules="rules"
					ref="uForm"
			>
				<u-form-item
						label="手机号"
						prop="form.phone"
						borderBottom
						ref="phone"
				>
					<u--input
							v-model="form.phone"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="验证码"
						prop="form.phone"
						borderBottom
						ref="code"
				>
				<view class="code-view">
					<view class="">
						<u--input
								v-model="form.code"
								border="none"
						></u--input>
					</view>
					<view class="">
						<u-button  type="primary" @click="handleSendCode">发送验证码</u-button>
					</view>
				</view>
				</u-form-item>
				</u--form>
				<view class="sub-btn">
					<u-button type="primary" @click="handleBind" :loading="loading" loadingText="提交中.....">绑定</u-button>
				</view>
				<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { sendCode } from '@/api/auth/user';
import { bindPhone } from '@/api/auth/user';
	export default {
		data() {
			return {
				form:{
					phone:'',
					code:''
				},
				loading:false
				
			};
		},
		methods:{
			/**
			 * 发送短信验证码
			 */
			handleSendCode(){
				sendCode(this.form.phone).then(res =>{
					if(res.code == 200){
						this.$refs.uToast.show({
							 type: "success",
							  message: "发送成功"
						})
					}else{
						this.$refs.uToast.show({
							 type: "error",
							  message: "res.msg"
						})
					}
				})
				
			},
			handleBind(){
				bindPhone(this.form.phone,this.form.code).then(res =>{
					if(res.code == 200){
						this.$refs.uToast.show({
							 type: "success",
							  message: "绑定成功"
						})
						uni.navigateTo({
							url:'/pages/interview/interview'
						})
					}else{
						this.$refs.uToast.show({
							 type: "error",
							  message: "res.msg"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.code-view{
		display: flex;
		justify-content: space-between;
		align-items: center;
		ul-button{
			
		}
		.content{
			padding: 30rpx;
		}
		.sub-btn{
			margin-top: 50rpx;
		}
}
</style>
